<script setup>
import JsonEditor from "jsoneditor";
import "jsoneditor/dist/jsoneditor.min.css";
import {onMounted, ref} from "vue";

const jsoneditor = ref()
const editor = ref()
const emits = defineEmits(['change'])

onMounted(() => {
  editor.value = new JsonEditor(jsoneditor.value, {
    mode: "code",
    onChangeText(json) {
      emits('change', json)
    }
  })

  editor.value.set(undefined)
})

function refresh() {
  editor.value && editor.value.refresh()
}

defineExpose({
  refresh
})
</script>

<template>
  <div ref="jsoneditor" class="jsoneditor-box"></div>
</template>

<style scoped lang="scss">
.jsoneditor-box {
  height: 400px;
}
</style>
